<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>04_浮动后的影响</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <title>03_浮动小练习</title>
        <style>
            .outer {
                width: 500px;
                border: 2px solid grey;
            }
            .box {
                width: 100px;
                height: 100px;
                background-color: skyblue;
                border: 2px solid black;
                margin: 10px;
            }
            .one,
            .two,
            .three {
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="outer">
            <div class="box box4">4</div>
            <div class="box one">1</div>
            <div class="box two">2</div>
            <div class="box three">3</div>
            
        </div>
        <!-- <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, eveniet. Molestiae assumenda, nemo magni alias
            eum nobis recusandae, labore iste minus consectetur nihil in porro ab dolore mollitia reiciendis officia culpa et
            officiis iure autem, veritatis ducimus vero. Sint voluptatum obcaecati deleniti temporibus ab, exercitationem
            itaque, in porro eius iure illo est illum, velit placeat molestias nesciunt quasi fuga tenetur quibusdam? Aliquid
            dolor optio, deserunt fuga at obcaecati quas consectetur impedit sit sequi? Modi maiores veniam nam sapiente odit
            est quaerat inventore aut nulla assumenda, aspernatur perspiciatis. Ipsum nisi rem sequi impedit porro eius, dolore
            eos natus odit, ut veniam!</div> -->
        </body>

    </html>
</body>

</html>